import React, { useState } from 'react';
import { IconButton, Menu, MenuItem } from '@mui/material';
import { MoreVert as MoreVertIcon } from '@mui/icons-material';

interface ParameterMenuProps {
  parameter: {
    name: string;
    inGroup?: boolean;
  };
  index: number;
  removeFromGroup: (index: number) => void;
  addToGroup: (index: number) => void;
  removeParameter: (index: number, parameter: any) => void;
}

/**
 * ParameterMenu Component
 * Menu component for experiment parameter actions
 */
const ParameterMenu: React.FC<ParameterMenuProps> = ({
  parameter,
  index,
  removeFromGroup,
  addToGroup,
  removeParameter,
}) => {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);

  const handleClick = (event: React.MouseEvent<HTMLElement>): void => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = (): void => {
    setAnchorEl(null);
  };

  return (
    <>
      <IconButton
        aria-haspopup="true"
        aria-controls={`${parameter.name}-simple-menu-${index}`}
        onClick={handleClick}
      >
        <MoreVertIcon />
      </IconButton>
      <Menu
        id={`${parameter.name}-simple-menu-${index}`}
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
        onClick={handleClose}
        PaperProps={{
          className: 'MuiPopover-experiment',
        }}
      >
        {parameter.inGroup ? (
          <MenuItem onClick={() => removeFromGroup(index)}>
            Remove from group
          </MenuItem>
        ) : (
          <MenuItem onClick={() => addToGroup(index)}>
            Add to Group
          </MenuItem>
        )}
        <MenuItem onClick={() => removeParameter(index, parameter)}>
          Delete
        </MenuItem>
      </Menu>
    </>
  );
};

export default ParameterMenu;

